<template>
  <div class="membership-page min-h-screen bg-gradient-to-br from-gray-50 to-blue-50">
    <div class="container-custom py-12">
      <!-- 页面标题 -->
      <div class="text-center mb-12">
        <h1 class="text-4xl font-bold text-gray-900 mb-4">
          <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-purple-600">
            会员服务
          </span>
        </h1>
        <p class="text-lg text-gray-600 max-w-2xl mx-auto">
          升级会员，解锁更多专属特权，让您的开发之路更加顺畅
        </p>
      </div>

      <!-- 会员等级对比 -->
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
        <!-- 免费会员 -->
        <div class="card hover:shadow-xl transition-shadow duration-300">
          <div class="text-center mb-6">
            <div class="inline-flex items-center justify-center w-16 h-16 bg-gray-100 rounded-full mb-4">
              <div class="i-mdi-account text-3xl text-gray-600" />
            </div>
            <h3 class="text-2xl font-bold text-gray-900 mb-2">免费会员</h3>
            <div class="text-3xl font-bold text-gray-900">
              ¥0
              <span class="text-sm font-normal text-gray-500">/永久</span>
            </div>
          </div>
          
          <ul class="space-y-3 mb-6">
            <li class="flex items-start">
              <div class="i-mdi-check-circle text-green-500 mr-2 mt-0.5 flex-shrink-0" />
              <span class="text-gray-600">浏览所有源码商品</span>
            </li>
            <li class="flex items-start">
              <div class="i-mdi-check-circle text-green-500 mr-2 mt-0.5 flex-shrink-0" />
              <span class="text-gray-600">查看在线文档</span>
            </li>
            <li class="flex items-start">
              <div class="i-mdi-check-circle text-green-500 mr-2 mt-0.5 flex-shrink-0" />
              <span class="text-gray-600">单次购买商品</span>
            </li>
            <li class="flex items-start">
              <div class="i-mdi-close-circle text-gray-300 mr-2 mt-0.5 flex-shrink-0" />
              <span class="text-gray-400">会员专属商品</span>
            </li>
            <li class="flex items-start">
              <div class="i-mdi-close-circle text-gray-300 mr-2 mt-0.5 flex-shrink-0" />
              <span class="text-gray-400">商品折扣</span>
            </li>
            <li class="flex items-start">
              <div class="i-mdi-close-circle text-gray-300 mr-2 mt-0.5 flex-shrink-0" />
              <span class="text-gray-400">专属客服</span>
            </li>
          </ul>

          <button class="btn-outline w-full" disabled>
            当前等级
          </button>
        </div>

        <!-- VIP会员 -->
        <div class="card hover:shadow-xl transition-shadow duration-300 border-2 border-blue-500 relative">
          <div class="absolute top-0 right-0 bg-blue-500 text-white px-3 py-1 rounded-bl-lg text-sm font-medium">
            推荐
          </div>
          
          <div class="text-center mb-6">
            <div class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-blue-100 to-blue-200 rounded-full mb-4">
              <div class="i-mdi-crown text-3xl text-blue-600" />
            </div>
            <h3 class="text-2xl font-bold text-gray-900 mb-2">VIP会员</h3>
            <div class="text-3xl font-bold text-blue-600">
              ¥199
              <span class="text-sm font-normal text-gray-500">/年</span>
            </div>
            <div class="text-sm text-gray-500 mt-1">约 ¥16.6/月</div>
          </div>
          
          <ul class="space-y-3 mb-6">
            <li class="flex items-start">
              <div class="i-mdi-check-circle text-green-500 mr-2 mt-0.5 flex-shrink-0" />
              <span class="text-gray-600">免费会员所有权益</span>
            </li>
            <li class="flex items-start">
              <div class="i-mdi-check-circle text-green-500 mr-2 mt-0.5 flex-shrink-0" />
              <span class="text-gray-600">商品享受 <strong class="text-blue-600">8折</strong> 优惠</span>
            </li>
            <li class="flex items-start">
              <div class="i-mdi-check-circle text-green-500 mr-2 mt-0.5 flex-shrink-0" />
              <span class="text-gray-600">每月免费下载 <strong class="text-blue-600">3个</strong> 商品</span>
            </li>
            <li class="flex items-start">
              <div class="i-mdi-check-circle text-green-500 mr-2 mt-0.5 flex-shrink-0" />
              <span class="text-gray-600">访问VIP专属商品库</span>
            </li>
            <li class="flex items-start">
              <div class="i-mdi-check-circle text-green-500 mr-2 mt-0.5 flex-shrink-0" />
              <span class="text-gray-600">优先获取新品信息</span>
            </li>
            <li class="flex items-start">
              <div class="i-mdi-check-circle text-green-500 mr-2 mt-0.5 flex-shrink-0" />
              <span class="text-gray-600">专属客服支持</span>
            </li>
          </ul>

          <button class="btn-primary w-full" @click="handlePurchase('vip')">
            立即开通
          </button>
        </div>

        <!-- SVIP会员 -->
        <div class="card hover:shadow-xl transition-shadow duration-300 bg-gradient-to-br from-purple-50 to-pink-50">
          <div class="text-center mb-6">
            <div class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-purple-100 to-purple-200 rounded-full mb-4">
              <div class="i-mdi-diamond text-3xl text-purple-600" />
            </div>
            <h3 class="text-2xl font-bold text-gray-900 mb-2">SVIP会员</h3>
            <div class="text-3xl font-bold text-purple-600">
              ¥599
              <span class="text-sm font-normal text-gray-500">/年</span>
            </div>
            <div class="text-sm text-gray-500 mt-1">约 ¥50/月</div>
          </div>
          
          <ul class="space-y-3 mb-6">
            <li class="flex items-start">
              <div class="i-mdi-check-circle text-green-500 mr-2 mt-0.5 flex-shrink-0" />
              <span class="text-gray-600">VIP会员所有权益</span>
            </li>
            <li class="flex items-start">
              <div class="i-mdi-check-circle text-green-500 mr-2 mt-0.5 flex-shrink-0" />
              <span class="text-gray-600">商品享受 <strong class="text-purple-600">6折</strong> 优惠</span>
            </li>
            <li class="flex items-start">
              <div class="i-mdi-check-circle text-green-500 mr-2 mt-0.5 flex-shrink-0" />
              <span class="text-gray-600">每月免费下载 <strong class="text-purple-600">10个</strong> 商品</span>
            </li>
            <li class="flex items-start">
              <div class="i-mdi-check-circle text-green-500 mr-2 mt-0.5 flex-shrink-0" />
              <span class="text-gray-600">访问SVIP专属商品库</span>
            </li>
            <li class="flex items-start">
              <div class="i-mdi-check-circle text-green-500 mr-2 mt-0.5 flex-shrink-0" />
              <span class="text-gray-600">源码定制服务优先权</span>
            </li>
            <li class="flex items-start">
              <div class="i-mdi-check-circle text-green-500 mr-2 mt-0.5 flex-shrink-0" />
              <span class="text-gray-600">1对1专属技术顾问</span>
            </li>
          </ul>

          <button class="btn-primary w-full bg-gradient-to-r from-purple-600 to-pink-600" @click="handlePurchase('svip')">
            立即开通
          </button>
        </div>
      </div>

      <!-- 会员特权详细说明 -->
      <div class="card mb-16">
        <h2 class="text-2xl font-bold text-gray-900 mb-8 text-center">会员特权详解</h2>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <div class="flex items-start space-x-4">
            <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
              <div class="i-mdi-ticket-percent text-2xl text-blue-600" />
            </div>
            <div>
              <h3 class="font-semibold text-gray-900 mb-1">专属折扣</h3>
              <p class="text-sm text-gray-600">VIP享8折，SVIP享6折，购买源码更实惠</p>
            </div>
          </div>

          <div class="flex items-start space-x-4">
            <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center flex-shrink-0">
              <div class="i-mdi-download text-2xl text-green-600" />
            </div>
            <div>
              <h3 class="font-semibold text-gray-900 mb-1">免费下载</h3>
              <p class="text-sm text-gray-600">每月免费下载配额，省钱又省心</p>
            </div>
          </div>

          <div class="flex items-start space-x-4">
            <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center flex-shrink-0">
              <div class="i-mdi-star text-2xl text-purple-600" />
            </div>
            <div>
              <h3 class="font-semibold text-gray-900 mb-1">专属商品</h3>
              <p class="text-sm text-gray-600">访问会员专属商品库，更多优质源码</p>
            </div>
          </div>

          <div class="flex items-start space-x-4">
            <div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center flex-shrink-0">
              <div class="i-mdi-bell-ring text-2xl text-orange-600" />
            </div>
            <div>
              <h3 class="font-semibold text-gray-900 mb-1">优先通知</h3>
              <p class="text-sm text-gray-600">新品上架第一时间通知，抢先体验</p>
            </div>
          </div>

          <div class="flex items-start space-x-4">
            <div class="w-12 h-12 bg-pink-100 rounded-lg flex items-center justify-center flex-shrink-0">
              <div class="i-mdi-headset text-2xl text-pink-600" />
            </div>
            <div>
              <h3 class="font-semibold text-gray-900 mb-1">专属客服</h3>
              <p class="text-sm text-gray-600">7×12小时专属客服，快速响应</p>
            </div>
          </div>

          <div class="flex items-start space-x-4">
            <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center flex-shrink-0">
              <div class="i-mdi-account-tie text-2xl text-indigo-600" />
            </div>
            <div>
              <h3 class="font-semibold text-gray-900 mb-1">技术顾问</h3>
              <p class="text-sm text-gray-600">SVIP专享1对1技术顾问服务</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 常见问题 -->
      <div class="card">
        <h2 class="text-2xl font-bold text-gray-900 mb-8 text-center">常见问题</h2>
        
        <div class="space-y-4">
          <div class="border-b border-gray-200 pb-4">
            <h3 class="font-semibold text-gray-900 mb-2">Q: 会员有效期是多久？</h3>
            <p class="text-gray-600">A: VIP和SVIP会员有效期均为1年（365天），到期后可续费。</p>
          </div>

          <div class="border-b border-gray-200 pb-4">
            <h3 class="font-semibold text-gray-900 mb-2">Q: 免费下载配额如何使用？</h3>
            <p class="text-gray-600">A: 每月自动刷新配额，未使用的配额不会累计到下月。VIP每月3个，SVIP每月10个。</p>
          </div>

          <div class="border-b border-gray-200 pb-4">
            <h3 class="font-semibold text-gray-900 mb-2">Q: 折扣可以与活动优惠叠加吗？</h3>
            <p class="text-gray-600">A: 会员折扣与平台活动优惠不可叠加使用，系统会自动选择最优惠的价格。</p>
          </div>

          <div class="border-b border-gray-200 pb-4">
            <h3 class="font-semibold text-gray-900 mb-2">Q: 购买后可以退款吗？</h3>
            <p class="text-gray-600">A: 开通后7天内未使用任何会员特权可申请退款，使用后不支持退款。</p>
          </div>

          <div class="pb-4">
            <h3 class="font-semibold text-gray-900 mb-2">Q: 如何升级会员等级？</h3>
            <p class="text-gray-600">A: VIP用户可随时升级至SVIP，补差价即可，有效期自升级日起重新计算。</p>
          </div>
        </div>
      </div>

      <!-- 底部CTA -->
      <div class="text-center mt-12">
        <p class="text-gray-600 mb-4">还有疑问？</p>
        <NuxtLink to="/docs" class="text-primary-600 hover:text-primary-700 font-medium">
          查看完整会员服务协议 →
        </NuxtLink>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const router = useRouter()
const authStore = useAuthStore()

function handlePurchase(type: 'vip' | 'svip') {
  if (!authStore.isLoggedIn) {
    // 未登录，跳转到登录页
    router.push({
      path: '/auth/login',
      query: { redirect: '/membership' }
    })
    return
  }

  // 已登录，跳转到支付页面
  // TODO: 实现支付流程
  alert(`即将开通 ${type === 'vip' ? 'VIP' : 'SVIP'} 会员，功能开发中...`)
}

// SEO
useSeoMeta({
  title: '会员服务 - 代码小库',
  description: '升级VIP/SVIP会员，享受专属折扣、免费下载、专属客服等多项特权，让您的开发之路更加顺畅',
  ogTitle: '会员服务 - 代码小库',
  ogDescription: '升级VIP/SVIP会员，享受专属折扣、免费下载、专属客服等多项特权',
})
</script>

<style scoped>
.btn-outline:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>

